<template>
  <back-dialog-base
    :title="title"
    :visible="visibleDialog"
    width="20rem"
    @onCommit="handleSubmit"
    @onCloesa="closeDlog"
  >
    <template #content>
      <div class="content-warp">
        <div class="left-form">
          <el-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="值班类型：" prop="hospitalName">
              <el-input
                v-model="form.hospitalName"
                placeholder="请输入…"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
  </back-dialog-base>
</template>

<script setup>
import { reactive, defineProps, ref, defineEmits, watch } from 'vue'
import BackDialogBase from '@/components/BackDialogBase'
import { message } from '@/utils/message'
import { saveArrangeRecord } from '@/api/dutyManagement'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  visibleDialog: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})
const emits = defineEmits(['onReload'])
const formRef = ref(null)
const form = reactive({
  hospitalName: ''
})
const rules = reactive({
  hospitalName: [
    {
      required: true,
      message: '值班类型不能为空',
      trigger: 'blur'
    }
  ]
})

const tagsLamp = ref([])
const tagsCamera = ref([])
const tagsScreen = ref([])
const closeDlog = () => {
  formRef.value.resetFields()
  clearForm()
  emits('onCloes')
}
const handleSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      save()
      console.log('验证通过')
    } else {
      console.log('验证错误')
      return false
    }
  })
}

const save = async (data) => {
  console.log('form', form)
  let msg = form.hospitalName
  // const res = await saveArrangeRecord({
  //   arrangeType: form.hospitalName
  // })
  // message({ type: 'success', message: '值班类型添加成功!' })
  // clearForm()
  console.log('msg', msg)
  emits('onReload', msg)
}

watch(
  () => props.rowData,
  () => {
    form.hospitalName = props.rowData.hospitalName
    console.log('props.rowData', props.rowData.hospitalName)
    if (props.rowData.id) {
      //这里只回显一个，演示用，具体逻辑先不管了
    } else {
      // clearForm()
    }
  }
)

const clearForm = () => {
  if (!formRef.value) return
  formRef.value.resetFields()
  form.value = {
    hospitalName: '',
    hospitalLevel: '',
    hospitalAddress: '',
    personnelQuantity: '',
    bedNumber: '',
    contactNumber: '',
    remark: '',
    mainEquipment: '',
    installTime: '',
    lampPostFirm: '',
    manageDepartment: '',
    constructUnit: '',
    remarks: '',
    state: 0
  }
}
</script>

<style lang="scss" scoped>
:deep.el-input__inner {
  width: 80% !important;
}
</style>
